<template>
  <div class="operationPage">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="工单编号：">
        <el-input v-model="taskCode" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="工单状态：">
        <el-select v-model="statusName" clearable placeholder="请输入">
          <el-option
            v-for="item in zhuangtaiList"
            :key="item.statusId"
            :label="item.statusName"
            :value="item.statusId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="onSubmit"
        >查询</el-button>
      </el-form-item>
    </el-form>

    <div class="table">
      <el-row>
        <el-button
          icon="el-icon-circle-plus-outline"
          class="add"
          type="primary"
          @click="addItem"
        >新建</el-button>
      </el-row>
      <el-table :border="false" :data="list" style="width: 100%">
        <el-table-column type="index" label="序号" width="70" />
        <el-table-column prop="taskCode" label="工单编号" width="180" />
        <el-table-column prop="innerCode" label="设备编号" />
        <el-table-column
          prop="taskType.typeName"
          label="工单类型"
          width="180"
        />
        <el-table-column
          prop="createType"
          label="工单方式"
          width="180"
        ><template v-slot="{ row }">
          <span v-if="row.createType === 0">自动</span>
          <span v-else-if="row.createType === 1">手动</span>
        </template></el-table-column>
        <el-table-column
          prop="taskStatusTypeEntity.statusName"
          label="工单状态"
        />
        <el-table-column prop="userName" label="运维人员" width="180" />
        <el-table-column prop="createTime" label="创建日期" />
        <el-table-column label="操作" width="180">
          <template v-slot="{ row }">
            <el-button
              size="mini"
              type="text"
              @click="getGongdanDesc(row)"
            >查看详情</el-button>
          </template></el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="pagination-container">
        <span class="pageText">共{{ totalCount }}条记录 第 {{ pageIndex }}/{{
          totalPage
        }}
          页</span>
        <el-pagination
          background:true
          layout="prev, pager, next,slot"
          prev-text="上一页"
          next-text="下一页"
          @prev-click="prevPage"
          @next-click="nextPage"
        />
      </div>

    </div>
    <!-- 新建弹层 -->
    <el-dialog
      title="新增工单"
      :visible.sync="isShowDialog"
      width="40%"
      class="dialog"
    >
      <el-form ref="addForm" :model="addValue" label-width="120px" class="addDialog">
        <el-form-item prop="innerCode" label="设备编号:">
          <el-input
            v-model="addValue.innerCode"
            placeholder="请输入"
            maxlength="15"
            show-word-limit
            style="width: 80%"
            @input="shebeibianhao"
          />
        </el-form-item>
        <el-form-item prop="productType" label="工单类型:">
          <el-select v-model="addValue.productType" placeholder="请选择" style="width: 80%">
            <el-option
              v-for="item in gongdanList"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="运维人员:">
          <el-select v-model="addValue.userId" placeholder="请选择" style="width: 80%">
            <el-option
              v-for="item in yunweirenyuan"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>

        </el-form-item>
        <el-form-item label="备注:">
          <el-input
            v-model="addValue.desc"
            placeholder="请输入备注(不超过40字)"
            maxlength="40"
            show-word-limit
            type="textarea"
            :rows="4"
            style="width: 80%"
          />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button @click="isShowDialog = false">取消</el-button>
              <el-button class="enter" @click="addGongdan">确定</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 查看工单详情 -->
    <el-dialog width="40%" class="gongdanDetail" :visible.sync="outerVisible" center>
      <template #title><span class="title">工单详情</span></template>
      <div class="pic">
        <div class="naozhong">
          <img v-if="gongdanzhaungtai==='待办'" src="" alt="">
          <img v-else-if="gongdanzhaungtai==='取消'" src="" alt="">
          <img v-else src="" alt="">
        </div>
        <span class="tou">{{ gongdanzhaungtai }}</span>
        <img v-if="gongdanzhaungtai==='待办'" src="https://likede2-admin.itheima.net/img/pic_1.834b274c.png" alt="">
        <img v-else-if="gongdanzhaungtai==='取消'" src="https://likede2-admin.itheima.net/img/pic_3.e8208e34.png" alt="">
        <img v-else src="https://likede2-admin.itheima.net/img/pic_4.3b5af41c.png" alt="">
      </div>
      <div class="txt">
        <ul>
          <li><span>设备编号:</span><span>{{ xiangqingList.innerCode }}</span></li>
          <li><span>运维人员:</span><span>{{ xiangqingList.userName }}</span></li>
          <li><span>工单方式:</span><span v-if="xiangqingList.createType">手动</span><span v-else>自动</span></li>
        </ul>
        <ul>
          <li><span>创建日期:</span><span>{{ xiangqingList.createTime }}</span></li>
          <li><span>工单类型:</span><span>{{ gongdanLeixing }}</span></li>
          <li><span>备注:</span><span>{{ xiangqingList.desc }}</span></li>
        </ul>
      </div>
      <!-- 判断工单状态 -->

      <template #footer :center="true">
        <el-button v-if="gongdanzhaungtai!=='取消'" class="btn" @click="innerVisible = true">取消工单</el-button>
        <el-button v-if="gongdanzhaungtai ==='取消'" class="btn" @click="addChongxin">重新创建</el-button>
      </template>
      <!-- 内层 -->
      <el-dialog
        center
        class="neiceng"
        width="30%"
        title="取消工单后，将不能恢复，是否确认取消？"
        :visible.sync="innerVisible"
        append-to-body
      >
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="getGongdanquxiao">确定</el-button>
        </div>
      </el-dialog>

    </el-dialog>
  </div>
</template>

<script>
import { getOperation, getzhuangtaiList, addOperation, getYunWeiRen, getGongdanList, getGongdanDesc, getGongdanquxiao } from '@/api/task'
export default {
  name: 'Operation',
  data() {
    return {
      // 搜索
      taskCode: '',
      statusName: null,
      // 状态列表
      zhuangtaiList: [],
      // 查看详情弹层
      outerVisible: false,
      innerVisible: false,
      xiangqingList: [],
      gongdanLeixing: '',
      gongdanzhaungtai: '',
      list: [],
      totalCount: null,
      totalPage: '',
      pageIndex: 1,
      pageSize: 10,
      isRepair: true,
      isShowDialog: false,
      addValue: {
        // 创建类型
        createType: 1,
        // 设备编号
        innerCode: '',
        // 执行人id
        userId: null,
        // 工单类型
        productType: null,
        // 描述信息
        desc: '',
        // 防止数据发布不成功
        assignorId: null
      },
      // 运维人员
      yunweirenyuan: [],
      // 工单类型
      gongdanList: []
    }
  },
  created() {
    this.getyunyingList()
    // 状态列表
    this.getzhuangtaiList()
  },
  methods: {
    // 状态列表
    async getzhuangtaiList() {
      const res = await getzhuangtaiList()
      this.zhuangtaiList = res
      console.log(this.zhuangtaiList)
    },
    async getyunyingList() {
      // 获取运营工单数据列表A
      const res = await getOperation({
        pageIndex: this.pageIndex,
        pageSize: 10,
        isRepair: true
      })
      console.log(res)
      this.list = res.currentPageRecords.map(item => {
        item.createTime = item.createTime.replace('T', ' ')
        item.updateTime = item.updateTime.replace('T', ' ')
        return item
      })
      console.log(this.list)
      this.pageIndex = res.pageIndex
      this.pageSize = res.pageSize
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
    },
    async onSubmit() {
      const obj = {
        taskCode: this.taskCode,
        pageIndex: this.pageIndex,
        pageSize: 10,
        isRepair: true,
        status: this.statusName
      }
      const res = await getOperation(obj)
      console.log(res)
      this.list = res.currentPageRecords.map(item => {
        item.createTime = item.createTime.replace('T', ' ')
        item.updateTime = item.updateTime.replace('T', ' ')
        return item
      })
      console.log(this.list)
      this.pageIndex = res.pageIndex
      this.pageSize = res.pageSize
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
    },
    // 切换上分页
    prevPage() {
      if (this.pageIndex !== 1) {
        this.pageIndex--
        this.getyunyingList()
      }
    },
    // 下一页
    nextPage() {
      this.pageIndex++
      this.getyunyingList()
    },
    // 新建弹层
    async addItem() {
      this.getGongdanList1()

      this.isShowDialog = true
    },
    async shebeibianhao() {
      if (this.addValue.innerCode) {
        const res = await getYunWeiRen(this.addValue.innerCode)
        this.yunweirenyuan = res
      }
    },
    // 获取工单类型
    async getGongdanList1() {
      const res = await getGongdanList()
      this.gongdanList = res.filter(item => item.type === 1)
      console.log(this.gongdanList)
    },
    // 添加工单
    async addGongdan() {
      this.addValue.assignorId = this.addValue.userId
      const res = await addOperation(this.addValue)
      if (res) {
        this.isShowDialog = false
        this.$refs.addForm.resetFields()
        this.getyunyingList()
        this.$message.success({
          message: '创建工单成功',
          offset: 90
        })
        this.addValue = {}
      } else {
        this.isShowDialog = false
      }
      this.yunweirenyuan = []
    },
    // 工单详情
    async getGongdanDesc(row) {
      this.outerVisible = true
      const obj = {
        // taskName: '运维工单',
        createType: 1,
        innerCode: row.innerCode,
        userId: row.userId,
        assignorId: row.assignorId,
        productType: row.taskType.taskType,
        desc: row.desc
      }
      const res = await getGongdanDesc(row.taskId, obj)
      // console.log(res)
      this.xiangqingList = res
      this.gongdanLeixing = this.xiangqingList.taskType.typeName
      this.gongdanzhaungtai = this.xiangqingList.taskStatusTypeEntity.statusName
    },
    // 取消工单
    async getGongdanquxiao() {
      const obj = {
        taskId: this.xiangqingList.taskId,
        desc: this.xiangqingList.desc
      }
      await getGongdanquxiao(this.xiangqingList.taskId, obj)
      this.innerVisible = false
      this.outerVisible = false
      this.getyunyingList()
      this.$message.success({
        message: '取消工单成功',
        offset: 90
      })
    },
    // 重新创建
    addChongxin() {
      this.shebeibianhao()
      this.outerVisible = false
      this.isShowDialog = true
      this.addValue = this.xiangqingList
      this.addValue.productType = this.gongdanLeixing
    }
  }
}
</script>
 <style lang="scss">
 *{
  margin: 0;
  padding: 0;
 }
li{
list-style: none;
}
</style>

<style lang="scss" scoped>
.neiceng{
  margin-top: 250px;
}
.gongdanDetail{
  display: flex;
flex-direction: column;
  .txt{
  // background-color: #1554b4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  li{
    margin-top: 20px;
  }
}
.pic{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f8f8;
  height: 70px;
  line-height: 70px;
  .naozhong{
   img{
    margin-top: 35px;
    padding-left: 15px;
   }
  }
  .tou{
    position: relative;
    left: -250px;
    top:3px
  }
}
.el-button{
  background-color: #fdf6ec;
  border: 0;
}
.title{
  float: left;
}
}

::v-deep .operationPage{
  font-size: 28px;
}
.demo-form-inline {
  background-color: #fff;
  height: 64px;
  display: flex;
  .el-form-item {
    margin-top: 13px;
    margin-left: 13px;
    .el-button {
      background-color: #5f84ff;
    }
  }
}
.table {
  margin-top: 26px;
  background-color: #fff;
  padding-left: 13px;
  padding-top: 20px;
  .add {
    color: #fff;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: 0;
  }
  .peizhi {
    color: #655b56;
  }
  .el-table {
    // background-color: #1554b4;
  }
}
.has-gutter {
  background-color: rgb(11, 95, 231);
}
::v-deep .btn-prev {
  width: 70px;
  height: 32px;
  background-color: #d5ddf8;
  border-radius: 2px;
}
::v-deep .btn-next {
  width: 70px;
  height: 32px;
  background-color: #d5ddf8;
  border-radius: 2px;
  margin-left: 15px;
}
.pagination-container{
  height: 100px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 100px;
}
::v-deep .pageText{
  font-size: 18px;
  color: #dbdfe5;
  margin-left: 15px;
}
.addDialog{
  .enter{
    color: #fff;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: 0;
  }
}
</style>
